<template>
  <el-config-provider :locale="locale">
    <router-view v-slot="{ Component }">
      <transition name="fade" mode="out-in" @after-leave="afterLeave">
        <component :is="Component" />
      </transition>
    </router-view>
    <regist :bIsShow="isShowRegister" @close="onCloseRegister"></regist>
    <login :bIsShow="isShowLogin" @close="onCloseLogin"></login>
    <reset-password-layout></reset-password-layout>
  </el-config-provider>
</template>

<script>
import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
  
import Regist from '@/views/child/login/RegistLayout.vue'
import Login from '@/views/child/login/LoginLayout.vue'
import ResetPasswordLayout from '@/views/child/login/ResetPasswordLayout.vue'
import { mapState, mapActions } from 'vuex'
import { EventBus } from '@/store/index'
import { getPxOVwByValue } from '@/store/utils'

export default {
  setup () {
    return {
      locale: zhCn,
    }
  },
  components: {
    Regist,
    Login,
    ResetPasswordLayout,
    ElConfigProvider,
  },
  created() {
    this.initCssVar();
  },
  beforeMount(){
    EventBus.$off("login");
    EventBus.$on("login", this.onShowLogin);
    EventBus.$off("register");
    EventBus.$on("register", this.onShowRegister);
  },
  computed: {
    ...mapState({
      isShowLogin: (state) => state.isShowLogin,
      isShowRegister: (state) => state.isShowRegister,
    }),
  },
  methods: {
    ...mapActions({
      updateLoginStatus: "updateLoginStatus",
      updateRegisterStatus: "updateRegisterStatus",
    }),
    afterLeave () {
      this.$root.$emit('triggerScroll')
    },
    onShowLogin(){
      this.updateLoginStatus(true);
    },
    onShowRegister(){
      this.updateRegisterStatus(true);
    },
    onCloseRegister(){
      this.updateRegisterStatus(false);
    },
    onCloseLogin(){
      this.updateLoginStatus(false);
    },
    initCssVar() {
      let arr = [-2,-4,-6,-8,-20,-26,-28,-30,-32,-36,-40,-50,2,4,6,8,10,12,14,16,18,20,22,24,26,28,30,32,34,36,38,40,42,44,48,50,52,54,56,58,60,70,80,84,90,72,78,100,106,108,120,132,136,150,156,170,190,192,230,300,330,420,450,500,510,750];
      let docStyle = document.documentElement.style;
      _.forEach(arr, (num) => {
        docStyle.setProperty(`--size-${num}`, getPxOVwByValue(num));
      })
      let initAPLayerCssObj = {
        "aplayer-author-size": 24,
        "aplayer-title-size": 28, 
        "aplayer-lrc-height": 70,
        "aplayer-lrc-size": 24,
        "aplayer-lrc-line-height": 48,
        "aplayer-lrc-active-size": 28,
        "aplayer-pic-top": 100,
        "calendar-body-font-size": 28,

        "van-padding-base": 4,
        "van-padding-xs": 8,
        "van-padding-sm": 12,
        "van-padding-md": 16,
        "van-padding-lg": 24,
        "van-padding-xl": 32,

        "van-font-size-xs": 10,
        "van-font-size-sm": 12,
        "van-font-size-md": 14,
        "van-font-size-lg": 16,
        "van-line-height-xs": 14,
        "van-line-height-sm": 18,
        "van-line-height-md": 20,
        "van-line-height-lg": 22,
        
        "van-border-width-base": 1,
        "van-border-radius-sm": 2,
        "van-border-radius-md": 4,
        "van-border-radius-lg": 8,
        "van-border-radius-max": 999,

        "van-font-size-lg": 32,
        "van-font-size-md": 28,
        "van-font-size-sm": 24,
        "van-field-text-area-min-height": 12,
        "van-calendar-header-title-height": 88,
        "van-calendar-day-height": 128,
        "van-calendar-month-mark-font-size": 320,
        "van-calendar-weekdays-height": 60,
        "van-calendar-selected-day-size": 108,
        "van-calendar-confirm-button-height": 72,
        "van-dropdown-menu-height": 48,

        "van-uploader-size": 160,
        "van-uploader-icon-size": 48,
        "van-uploader-delete-icon-size": 28,
        "van-uploader-file-icon-size": 40,
        "van-uploader-mask-icon-size": 44,
        "van-uploader-loading-icon-size" : 44,

        "van-button-mini-height": 48,
        "van-button-small-height": 64,
        "van-button-large-height": 100,
        "van-button-default-height": 88,
        "van-button-loading-icon-size": 40,

        "van-toast-icon-size": 72,
        "van-toast-text-min-width": 192,
        "van-toast-default-width": 176,
        "van-toast-default-min-height": 176,

        "van-checkbox-size": 40,
        "van-radio-size": 40,
        "van-field-icon-size": 32,
        "van-field-clear-icon-size": 32,
        "van-field-error-message-font-size": 24,
        // "van-field-text-area-min-height": 120,
        "van-field-word-limit-line-height": 32,
        "van-address-list-item-font-size": 26,
        "van-address-list-edit-icon-size": 40,

        "van-switch-size": 60,
        "van-loading-spinner-size": 60,
      }
      _.forEach(initAPLayerCssObj, (num, key) => {
        docStyle.setProperty(`--${key}`, getPxOVwByValue(num));
      })
    },
  },
}
</script>
